<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>canvas画布</title>
	</head>
	<body>
		<canvas id="mycanvas" width="800" height="600"></canvas>
	</body>
</html>
<script>
	var c=document.getElementById("mycanvas");
	var ctx=c.getContext("2d");
	
	ctx.fillRect(10,10,50,50);//在（10,10）上画一个高宽为50 50的实心矩形
	ctx.strokeRect(70,10,50,50);
	
	ctx.strokeStyle="red";
	ctx.beginPath();
	ctx.moveTo(200,0);
	ctx.lineTo(200,100);	
	ctx.closePath();
	ctx.stroke();
	
	ctx.strokeStyle="green";
	ctx.beginPath();
	ctx.moveTo(150,50);
	ctx.lineTo(250,50);
	ctx.closePath();
	ctx.stroke();
	
	ctx.moveTo(150,50);
	ctx.lineTo(200,0);
	ctx.stroke();
	ctx.moveTo(200,0);
	ctx.lineTo(250,50);
	ctx.stroke();
	ctx.moveTo(250,50);
	ctx.lineTo(200,100);
	ctx.stroke();
	ctx.moveTo(200,100);
	ctx.lineTo(150,50);
	ctx.stroke();
	
	ctx.strokeStyle="red";
	ctx.beginPath();
	ctx.arc(100,150,30,0,2*Math.PI);
	ctx.closePath();	
	ctx.stroke();
	
	ctx.strokeStyle="red";
	ctx.beginPath();
	ctx.arc(100,150,15,2.5,2*Math.PI);	
	ctx.stroke();
	
	ctx.strokeStyle="black";
	ctx.beginPath();
	ctx.arc(40,150,30,0,2*Math.PI);
	ctx.closePath();
	ctx.stroke();
	
	ctx.strokeStyle="black";
	ctx.beginPath();
	ctx.arc(70,203,30,0,2*Math.PI);
	ctx.closePath();
	ctx.stroke();
	
	ctx.fillStyle="green";
	ctx.fillRect(300,10,100,100);
	
	ctx.strokeStyle="red";
	ctx.strokeRect(250,190,100,100);
	ctx.strokeStyle="#000"
	ctx.strokeRect(300,200,100,100);
	ctx.strokeStyle="#ccc";
	ctx.strokeRect(260,180,100,100);
	
	var img=new Image();
	img.src="img/123.webp";
	img.onload=function(){
		ctx.drawImage(img,300,300,450,300);
	}
</script>